<template>
	<div class="sidebar">
		<div class="header line">
			<span class="bold font_size18">{{ '设置' }}</span>
		</div>
		<ul class="menu-list">
			<li v-for="menuItem in menuData" :key="menuItem.id" class="menu-item">
				<div class="menu-content mb5">
					<span class="ml10"></span>
					<span class="menu-text font_size12">{{ menuItem.text }}</span>
				</div>
				<ul class="sub-menu" v-if="menuItem.children && menuItem.children.length > 0">
					<li v-for="subItem in menuItem.children" :key="subItem.id" class="sub-menu-item"
						:class="{ active: currentMenu === subItem.id }" v-if="subItem.permission">
						<div class="sub-menu-content" @click="handleMenuClick(subItem)">
							<span class="sub-menu-icon">{{ subItem.icon }}</span>
							<span class="sub-menu-text">{{ subItem.text }}</span>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, defineProps, defineEmits, watch, computed } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
import accessCtrl from "@/js/limit/AccessCtrl.js"; // 检测权限
const props = defineProps({
	menuList: {
		type: Array,
		default: () => []
	},
	inMenuData: {
		type: Object,
		default: () => ({
			id: 'myCompany',
			text: '我的企业',
			icon: '🏬',
			permission: true
		})
	}
})
const emit = defineEmits(['menuClick'])
import localStore from '@/js/LocalStore.js'
const userInfo = ref(localStore.getUserInfo() || {});
const cpInfo = ref(localStore.getCpInfo() || {});

// 当前选中的菜单项
console.log("props.inMenuData.id=", props.inMenuData.id)
const currentMenu = ref(props.inMenuData.id)
watch(() => props.inMenuData, (newVal, oldVal) => {
	if (newVal.id !== oldVal.id) {
		currentMenu.value = props.inMenuData.id
	}
})

// 菜单数据 ⚙️ 🧪 🔊
const menuData = ref([])
// 异步初始化菜单数据
const initMenuData = async () => {
	const menuConfig = [
		{
			id: 'modelExperience',
			text: '企业',
			icon: '', // 🏢
			clickable: false,
			children: [
				// {
				// 	id: 'accSecury',
				// 	text: '账号与安全',
				// 	icon: '⚙️',
				// 	permission: true
				// },
				{
					id: 'myCompany',
					text: '我的企业',
					icon: '🏬',
					permission: await accessCtrl.getSetCpLimit()
				},
			]
		},
		{
			id: 'workbench',
			text: '工作台',
			icon: '',
			clickable: false,
			children: [
				{
					id: 'storeManage',
					text: '门店管理',
					icon: '📚',
					permission: await accessCtrl.getSetShopLimit()
				},
				{
					id: 'warehouseManage',
					text: '仓库管理',
					icon: '📈',
					permission: await accessCtrl.getSetStockLimit()
				},
				{
					id: 'memberManage',
					text: '成员管理',
					icon: '👥',
					permission: await accessCtrl.getSetStaffiLimit()
				},
				{
					id: 'customerSetting',
					text: '客户设置',
					icon: '💼',
					permission: await accessCtrl.getSetCustomerLimit()
				},
				{
					id: 'supplierSetting',
					text: '供应商设置',
					icon: '🧪',
					permission: await accessCtrl.getSetSupplierLimit()
				},
				{
					id: 'salesSetting',
					text: '销售设置',
					icon: '🚀',
					permission: await accessCtrl.getSetSaleLimit()
				},
				{
					id: 'procureSetting',
					text: '采购设置',
					icon: '📊',
					permission: await accessCtrl.getSetPurchaseLimit()
				},
				{
					id: 'warehouseManageSetting',
					text: '库管设置',
					icon: '🛠️',
					permission: await accessCtrl.getSetKgLimit()
				},
				{
					id: 'yuyueSetting',
					text: '预约设置',
					icon: '🔔',
					permission: await accessCtrl.getSetYyLimit()
				},
				{
					id: 'basicSetting',
					text: '基础设置',
					icon: '🛠️',
					permission: await accessCtrl.getSetBaseLimit()
				},
				{
					id: 'helper',
					text: '帮助中心',
					icon: '📚',
					permission: true
				},
			]
		}
	]
	menuData.value = menuConfig
}

// 处理菜单项点击
const handleMenuClick = (menu) => {
	currentMenu.value = menu.id
	emit('menuClick', menu)
}

// 获取详情
const cmpanyInfo = ref({})
const getCmpanyInfo = async () => {
	try {
		let res = await proxy.$api({ url: config.compset_company_info, data: {} })
		let result = res.data || {}
		if (res.status == 1 && result) {
			cmpanyInfo.value = {
				...result,
			}
			proxy.$store.commit('common/set_cmpany_info', result);
		}
	} catch (error) { }
}
getCmpanyInfo()

onMounted(async () => {
	await initMenuData()
})

</script>

<style scoped>
.sidebar {
	padding-left: 10px;
	width: 200px;
	height: 100vh;
	overflow-y: auto;
}

.header {
	padding: 12px 10px;
	margin-bottom: 10px;
}

.menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-content {
	display: flex;
	align-items: center;
	color: #a099b8;
}

.menu-icon {
	font-size: 16px;
	width: 20px;
	text-align: center;
}

.menu-text {
	font-size: 14px;
}

.sub-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 16px;
}

.sub-menu-item {
	padding: 4px 8px;
	margin-bottom: 8px;
	border-radius: 8px;
}

.sub-menu-item.active {
	background-color: rgb(219, 226, 240);
}

.sub-menu-content {
	display: flex;
	align-items: center;
	color: rgba(91, 72, 116, 1);
	cursor: pointer;
	transition: background-color 0.3s;
}

.sub-menu-item:hover {
	background-color: rgb(219, 226, 240);
}

.sub-menu-icon {
	margin-right: 8px;
	font-size: 13px;
	text-align: center;
	display: inline-block;
}

.sub-menu-text {
	color: rgba(38, 36, 76, 0.88);
	font-size: 15px;
}

.line {
	border-bottom: 1px solid #e8e8e8;
}
</style>